<template>
	<view class="container">
		<image src="../../static/drawable-ldpi/bg.png" class="login-img"></image>
		
		
		<uni-forms ref="form" :rules="rules" :modelValue="setUpParams">
			<uni-forms-item class="login-user" name="address" >
				<uni-easyinput type="text" v-model="setUpParams.address" placeholder="请输入IP地址" />
			</uni-forms-item>
			<uni-forms-item class="login-password" name="serve" >
				<uni-easyinput type="text" v-model="setUpParams.serve" placeholder="请输入端口号" />
			</uni-forms-item>
		</uni-forms>
		<button class="login" @click="submit('form')">确定</button>
	</view>
</template>

<script>
	import { setStorageSync,removeStorageSync } from '../../utils/utils.js'
	export default {
		data() {
			return {
				rules: {
					// 对name字段进行必填验证
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入IP地址',
							},
				
						]
					},
					// 对email字段进行必填验证
					serve: {
						rules: [{
								required: true,
								errorMessage: '请输入端口号',
							},
				
						]
					}
				},
				setUpParams:{
					address:null,
					serve:null
				},
				path:null
			}
		},
		methods: {
			submit(ref){
				this.$refs[ref].validate().then(res => {
					removeStorageSync('base_url')
					this.path='http://'+this.setUpParams.address+':'+this.setUpParams.serve
				setStorageSync('base_url',this.path)
				uni.navigateTo({
					url:'/pages/login/index'
				})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss">

	.login-img {
		width: 100%;
	}

	.login-user {
		margin: 40rpx auto;
		width: 60%;


	}

	.login-password {
		margin: 40rpx auto;
		width: 60%;

	}

	.login {
		width: 80%;
		margin-left: 10%;
		margin-top: 10%;
		float: left;
		color: white;
		background-color: green;
	}

	.setup {
		width: 40%;
		margin-left: 4%;
		float: left;
		margin-top: 10%;
		color: white;
		background-color: green;
	}
</style>
